<!doctype html>

<html>
  	<head>
    		<meta charset=utf-8>
		<title>CSS Reference</title>
		<link rel=stylesheet type=text/css href=default.css>
	</head>
	
<body>

<table id="layout">
<tr>
	<th colspan="2" id="header">CSS Clear Property</th>
</tr>	
<tr>
	<td id="navigation">  <ul>
    <li><a href="background.html">background</a></li>
    <li><a href="border.html">border</a></li>
    <li><a href="clear.html">clear</a></li>
    <li><a href="color.html">color</a></li>
    <li><a href="display.html">display</a></li>
    <li><a href="float.html">float</a></li>
    <li><a href="font.html">font</a></li>
    <li><a href="height.html">height</a></li>
    <li><a href="letter-spacing.html">letter-spacing</a></li>
    <li><a href="line-height.html">line-height</a></li>
    <li><a href="list-style.html">list-style</a></li>
    <li><a href="margin.html">margin</a></li>
    <li><a href="overflow.html">overflow</a></li>
    <li><a href="padding.html">padding</a></li>
    <li><a href="text-align.html">text-align</a></li>
    <li><a href="text-decoration.html">text-decoration</a></li>
    <li><a href="text-indent.html">text-indent</a></li>
    <li><a href="text-transform.html">text-transform</a></li>
    <li><a href="vertical-align.html">vertical-align</a></li>
    <li><a href="width.html">width</a></li>
  </ul>
</td>
<td id="content">
<h2>Definition and Usage</h2>
<p>The clear property specifies which side(s) of an element other floating elements are not allowed.</p>
<p>Default value: 	none<br>
Inherited: 	no</p>
CSS Syntax<br>
<div id="syntax">
clear: none|left|right|both|initial|inherit;
</div>

<h3>Property Values</h3>
<table id="properties">
	<tr>
		<th>Value</th>
		<th>Description</th>
	</tr>
	<tr>
		<td>none</td>
		<td>Default. Allows floating elements on both sides</td>
		
	</tr>
	<tr>
		<td>left</td>
		<td>No floating elements allowed on the left side</td>
		
	</tr>
	<tr>
		<td>right</td>
		<td>No floating elements allowed on the right side</td>
	</tr>
		<tr>
		<td>both</td>
		<td>No floating elements allowed on either the left or the right side</td>
	</tr>
			<tr>
		<td>initial</td>
		<td>Sets this property to its default value.</td>
	</tr>
	<tr>
		<td>inherit</td>
		<td>Inherits this property from its parent element.</td>
	</tr>
</table>
<pre>
<code>
img.clear {
    float: left;
}

p.clear {
    clear: both;
}
</code></pre>
<img class="clear" src="logocss.gif" width="95" height="84" alt="logo">
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
</td>
</tr>
<tr>
<td colspan="2" id="footer">
&copy; HTML Class of 2015
</td>
</tr>
</table>
  
</body>	

</html>